<template>
  <div>
    <ZgNewPage
      ref="page"
      title="数据类型"
      :scrollX="1500"
      @search="onSearch"
    >
      <template slot="columns">
        <a-table-column :width="100" dataIndex="dataType" title="数据类型"></a-table-column>
        <a-table-column :width="160" dataIndex="javaType" title="java类型"></a-table-column>
        <a-table-column :width="300" title="组件类型">
          <template slot-scope="obj">
            <a-popover title="组件示例">
              <template slot="content">
                <div class="w500">
                  <div v-if="optionalCompTypeArr(obj.key).map(item => item.key).includes(1)" class="wfull flx-s mb10">
                    <div class="w120">单行文本：</div>
                    <ZgInput class="flx-1"/>
                  </div>
                  <div v-if="optionalCompTypeArr(obj.key).map(item => item.key).includes(2)" class="wfull flx-s mb10">
                    <div class="w120">数字：</div>
                    <ZgNumber class="flx-1"/>
                  </div>
                  <div v-if="optionalCompTypeArr(obj.key).map(item => item.key).includes(3)" class="wfull flx-s mb10">
                    <div class="w120">单选：</div>
                    <ZgCheckbox class="flx-1"/>
                  </div>
                  <div v-if="optionalCompTypeArr(obj.key).map(item => item.key).includes(4)" class="wfull flx-s mb10">
                    <div class="w120">多选：</div>
                    <ZgSelectMany code="sex" class="flx-1"/>
                  </div>
                  <div v-if="optionalCompTypeArr(obj.key).map(item => item.key).includes(5)" class="wfull flx-s mb10">
                    <div class="w120">字典：</div>
                    <ZgDictionary code="sex" class="flx-1"/>
                  </div>
                  <div v-if="optionalCompTypeArr(obj.key).map(item => item.key).includes(6)" class="wfull flx-s mb10">
                    <div class="w120">开关：</div>
                    <ZgSwitch :width="80"/>
                  </div>
                  <div v-if="optionalCompTypeArr(obj.key).map(item => item.key).includes(7)" class="wfull flx-s mb10">
                    <div class="w120">多行文本：</div>
                    <ZgTextarea class="flx-1"/>
                  </div>
                  <div v-if="optionalCompTypeArr(obj.key).map(item => item.key).includes(8)" class="wfull flx-s mb10">
                    <div class="w120">富文本：</div>
                    <ZgTinymce class="flx-1"/>
                  </div>
                  <div v-if="optionalCompTypeArr(obj.key).map(item => item.key).includes(9)" class="wfull flx-s mb10">
                    <div class="w120">图片上传：</div>
                    <ZgUpImg class="flx-1"/>
                  </div>
                  <div v-if="optionalCompTypeArr(obj.key).map(item => item.key).includes(10)" class="wfull flx-s mb10">
                    <div class="w120">日期选择：</div>
                    <ZgDatePicker class="flx-1"/>
                  </div>
                  <div v-if="optionalCompTypeArr(obj.key).map(item => item.key).includes(11)" class="wfull flx-s mb10">
                    <div class="w120">日期时间选择：</div>
                    <ZgDateTimePicker class="flx-1"/>
                  </div>
                </div>
              </template>
              {{ optionalCompTypeArr(obj.key).map(item => item.label).join(',') }}
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column :width="140" dataIndex="mysqlType" title="mysql类型"></a-table-column>
        <a-table-column :width="140" dataIndex="oracleType" title="oracle类型"></a-table-column>
        <a-table-column :width="100" title="批量设置">
          <template slot-scope="obj">
            {{ obj.isBatch ? '✓' : '' }}
          </template>
        </a-table-column>
        <a-table-column :width="100" title="查询条件">
          <template slot-scope="obj">
            {{ obj.isCondition ? '✓' : '' }}
          </template>
        </a-table-column>
        <a-table-column :width="300" title="查询方式">
          <template v-if="obj.conditionMode&&obj.conditionMode.length>0" slot-scope="obj">
            <a-tag v-for="(t,i) in obj.conditionMode.split(',')" :key="`${obj.dataType}_${i}`">
              {{ t }}
            </a-tag>
          </template>
        </a-table-column>
      </template>
    </ZgNewPage>
  </div>
</template>
<script>
import ZgCheckbox from '@/comp/ZgCheckbox.vue'
export default {
  components: { ZgCheckbox },
  data () {
    return {
      compTypeArr: [
        { key: 1, label: '单行文本', name: 'ZgInput', dataTypeArr: [1] },
        { key: 2, label: '数字', name: 'ZgNumber', dataTypeArr: [3, 4] },
        { key: 3, label: '单选', name: 'ZgCheckbox', dataTypeArr: [5] },
        { key: 4, label: '多选', name: 'ZgSelectMany', dataTypeArr: [1] },
        { key: 5, label: '字典', name: 'ZgDictionary', dataTypeArr: [1] },
        { key: 6, label: '开关', name: 'ZgSwitch', dataTypeArr: [5] },
        { key: 7, label: '多行文本', name: 'ZgTextarea', dataTypeArr: [2] },
        { key: 8, label: '富文本', name: 'ZgTinymce', dataTypeArr: [2] },
        { key: 9, label: '图片上传', name: 'ZgUpFile', dataTypeArr: [1] },
        { key: 10, label: '日期选择', name: 'ZgDatePicker', dataTypeArr: [7] },
        { key: 11, label: '日期时间选择', name: 'ZgDateTimePicker', dataTypeArr: [8] }
      ]
    }
  },
  methods: {
    optionalCompTypeArr (dataTypeKey) {
      return this.compTypeArr.filter(item => {
        return item.dataTypeArr.includes(dataTypeKey)
      })
    },
    onSearch (param) {
      const list = [
        { key: 1, dataType: '短字符串', javaType: 'java.lang.String', compType: [''], mysqlType: 'varchar(255)', oracleType: 'NVARCHAR2(255)', isBatch: true, isCondition: true, conditionMode: '=,like' },
        { key: 2, dataType: '长字符串', javaType: 'java.lang.String', compType: [''], mysqlType: 'text', oracleType: 'NCLOB', isBatch: false, isCondition: true, conditionMode: 'like' },
        { key: 3, dataType: '整数', javaType: 'java.lang.Integer', compType: [''], mysqlType: 'int', oracleType: 'NUMBER(11)', isBatch: true, isCondition: true, conditionMode: '=,>,<,>=,<=,between' },
        { key: 4, dataType: '浮点数', javaType: 'java.math.BigDecimal', compType: [''], mysqlType: 'decimal', oracleType: 'NUMBER(10,2)', isBatch: false, isCondition: false, conditionMode: '' },
        { key: 5, dataType: '布尔值', javaType: 'java.lang.Boolean', compType: [''], mysqlType: 'tinyint(1)', oracleType: 'NUMBER(4)', isBatch: true, isCondition: true, conditionMode: '=' },
        { key: 6, dataType: '长整数', javaType: 'java.lang.Long', compType: [''], mysqlType: 'bigint', oracleType: 'NUMBER(20)', isBatch: true, isCondition: true, conditionMode: '=' },
        { key: 7, dataType: '日期', javaType: 'java.sql.Date', compType: [''], mysqlType: 'date', oracleType: 'DATE', isBatch: true, isCondition: true, conditionMode: '=,>,<,>=,<=,between' },
        { key: 8, dataType: '日期时间', javaType: 'java.sql.Timestamp', compType: [''], mysqlType: 'datetime', oracleType: 'DATE', isBatch: false, isCondition: true, conditionMode: '>,<,>=,<=,between' }
      ]
      this.$refs.page.endSearch({
        total: list.length,
        list: list
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
